/* 深色模式样式
------------------------------- */
[data-theme='dark'] {
	// 变量(自定义时，只需修改这里的值)
	--next-bg-main: #1f1f1f;
	--next-color-white: #ffffff;
	--next-color-disabled: #191919;
	--next-color-bar: #dadada;
	--next-color-primary: #303030;
	--next-border-color: #424242;
	--next-border-black: #333333;
	--next-border-columns: #2a2a2a;
	--next-color-seting: #505050;
	--next-text-color-regular: #9b9da1;
	--next-text-color-placeholder: #7a7a7a;
	--next-color-hover: #3c3c3c;
	--next-color-hover-rgba: rgba(0, 0, 0, 0.3);
	--el-color-warning-light-3: #a77730;
    --el-color-warning-light-5: #7d5b28;
    --el-color-warning-light-7: #533f20;
    --el-color-warning-light-8: #3e301c;
	--el-color-warning-light-9: #2b1d1d;

	// root
	--next-bg-main-color: var(--next-bg-main) !important;
	--next-bg-topBar: var(--next-color-disabled) !important;
	--next-bg-topBarColor: var(--next-color-bar) !important;
	--next-bg-menuBar: var(--next-color-disabled) !important;
	--next-bg-menuBarColor: var(--next-color-bar) !important;
	--next-bg-columnsMenuBar: var(--next-color-disabled) !important;
	--next-bg-columnsMenuBarColor: var(--next-color-bar) !important;
	--next-border-color-light: var(--next-border-black) !important;
	--next-color-primary-lighter: var(--next-color-primary) !important;
	--next-color-success-lighter: var(--next-color-primary) !important;
	--next-color-warning-lighter: var(--next-color-primary) !important;
	--next-color-danger-lighter: var(--next-color-primary) !important;
	--next-bg-color: var(--next-color-primary) !important;
	--next-color-dark-hover: var(--next-color-hover) !important;
	--next-color-menu-hover: var(--next-color-hover-rgba) !important;
	--next-color-user-hover: var(--next-color-hover-rgba) !important;
	--next-color-seting-main: var(--next-color-seting) !important;
	--next-color-seting-aside: var(--next-color-hover) !important;
	--next-color-seting-header: var(--next-color-primary) !important;

	// element plus
	--el-color-white: var(--next-color-disabled) !important;
	--el-text-color-primary: var(--next-color-bar) !important;
	--el-border-color: var(--next-border-black) !important;
	--el-border-color-light: var(--next-border-black) !important;
	--el-border-color-lighter: var(--next-border-black) !important;
	--el-border-color-extra-light: var(--el-color-primary-light-8) !important;
	--el-text-color-regular: var(--next-text-color-regular) !important;
	--el-bg-color: var(--next-color-disabled) !important;
	--el-color-primary-light-9: var(--next-color-hover) !important;
	--el-text-color-disabled: var(--next-text-color-placeholder) !important;
	--el-text-color-disabled-base: var(--el-color-primary) !important;
	--el-text-color-placeholder: var(--next-text-color-placeholder) !important;
	--el-disabled-bg-color: var(--next-color-disabled) !important;
	--el-fill-base: var(--next-color-white) !important;
	--el-fill-colo: var(--next-color-hover-rgba) !important;
	--el-fill-color: var(--next-color-hover-rgba) !important;
	--el-fill-color-blank: var(--next-color-disabled) !important;
	--el-fill-color-light: var(--next-color-hover-rgba) !important;
	--el-bg-color-overlay: var(--el-color-primary-light-9) !important;
	--el-mask-color: rgb(42 42 42 / 80%);

	// button
	.el-button {
		&:hover {
			border-color: var(--next-border-color) !important;
		}
	}
	.el-button--primary,
	.el-button--info,
	.el-button--danger,
	.el-button--success,
	.el-button--warning {
		--el-button-text-color: var(--next-color-white) !important;
		--el-button-hover-text-color: var(--next-color-white) !important;
		--el-button-disabled-text-color: var(--next-color-white) !important;
		&:hover {
			border-color: var(--el-button-hover-border-color, var(--el-button-hover-bg-color)) !important;
		}
	}
	.el-button--primary.is-link {
		border: none !important;
		--el-button-text-color: var(--el-color-primary) !important;
		&:hover {
			border: none !important;
		}
	}
	.el-button--warning.is-plain{
		--el-button-bg-color: var(--el-color-warning-light-9);
		--el-button-text-color: var(--el-color-warning) !important;
	}
	// drawer
	.el-divider__text {
		background-color: var(--el-color-white) !important;
	}
	.el-drawer {
		border-left: 1px solid var(--next-border-color-light) !important;
	}

	// tabs
	.el-tabs--border-card {
		background-color: var(--el-color-white) !important;
	}
	.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
		background: var(--next-color-primary-lighter);
	}

	// alert / notice-bar
	.home-card-item {
		border: 1px solid var(--next-border-color-light) !important;
	}
	.el-alert,
	.notice-bar {
		border: 1px solid var(--next-border-color) !important;
		background-color: var(--next-color-disabled) !important;
	}

	// menu
	.layout-aside {
		border-right: 1px solid var(--next-border-color-light) !important;
	}

	// colorPicker
	.el-color-picker__mask {
		background: unset !important;
	}
	.el-color-picker__trigger {
		border: 1px solid var(--next-border-color-light) !important;
	}

	// popper / dropdown
	.el-popper {
		border: 1px solid var(--next-border-color) !important;
		color: var(--el-text-color-primary) !important;
		.el-popper__arrow:before {
			background: var(--el-color-white) !important;
			border: 1px solid var(--next-border-color);
		}
		a {
			color: var(--el-text-color-primary) !important;
		}
	}
	.el-popper,
	.el-dropdown-menu {
		background: var(--el-color-white) !important;
	}
	.el-dropdown-menu__item:hover:not(.is-disabled) {
		background: var(--el-bg-color) !important;
	}
	.el-dropdown-menu__item.is-disabled {
		font-weight: 700 !important;
	}

	// input
	.el-input-group__append,
	.el-input-group__prepend {
		border: var(--el-input-border) !important;
		border-right: none !important;
		background: var(--next-color-disabled) !important;
		border-left: 0 !important;
	}
	.el-input-number__decrease,
	.el-input-number__increase {
		background: var(--next-color-disabled) !important;
	}

	// tag
	.el-select .el-select__tags .el-tag {
		background-color: var(--next-bg-color) !important;
	}

	// pagination
	.el-pagination.is-background .el-pager li:not(.disabled).active {
		color: var(--next-color-white) !important;
	}
	.el-pagination.is-background .btn-next,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .el-pager li {
		background-color: var(--next-bg-color);
	}

	// radio
	.el-radio-button:not(.is-active) .el-radio-button__inner {
		border: 1px solid var(--next-border-color-light) !important;
		border-left: 0 !important;
	}
	.el-radio-button.is-active .el-radio-button__inner {
		color: var(--next-color-white) !important;
	}
	.el-upload--picture-card{
		background-color: transparent;
	}
	// countup
	.countup-card-item-flex {
		color: var(--el-text-color-primary) !important;
	}

	// editor
	.editor-container {
		.w-e-toolbar {
			background: var(--el-color-white) !important;
			border: 1px solid var(--next-border-color-light) !important;
			.w-e-menu:hover {
				background: var(--next-color-user-hover) !important;
				i {
					color: var(--el-text-color-primary) !important;
				}
			}
		}
		.w-e-text-container {
			border: 1px solid var(--next-border-color-light) !important;
			border-top: none !important;
			.w-e-text {
				background: var(--el-color-white) !important;
			}
		}
	}

	// date-picker
	.el-picker-panel {
		background: var(--el-color-white) !important;
	}

	// dialog
	.el-dialog {
		border: 1px solid var(--el-border-color-lighter);
		.el-dialog__header {
			color: var(--el-text-color-primary) !important;
		}
	}

	// columns
	.layout-columns-aside ul .layout-columns-active {
		color: var(--next-color-white) !important;
	}
	.layout-columns-aside {
		border-right: 1px solid var(--next-border-columns);
	}

	// tagsView
	.tags-style-one {
		.is-active {
			color: var(--el-text-color-primary) !important;
		}
		.layout-navbars-tagsview-ul-li:hover {
			border-color: var(--el-border-color-lighter) !important;
		}
	}
	.el-popper.layer-edit-pop .layer-organize-list{
		background: var(--el-fill-color-blank);
	}
	.layout-container .page-block{
		background: var(--el-fill-color-blank);
	}
	.el-table__header-wrapper .el-table__cell{
		color: var(--next-color-white) !important;
	}
	.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
		background: unset !important;
	}
	.page-container{
		background: var(--next-bg-main) !important;
		h2{
			color: var(--next-color-white);
		}
	}
	.footer-fixed{
		background: var(--el-fill-color-blank) !important;
		box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 5px 0px, rgba(255, 255, 255, 0.1) 0px 0px 1px 0px !important;
	}
	.customer-detail .company-data .company-title{
		color: var(--next-color-white) !important;
	}
	.ssal-calendar{
		background: transparent !important;
		.el-tag--small{
			border: none !important;
		}
		.calendar-container-box{
			background: transparent !important;
		}
		.switch-date{
			background: transparent !important;
			border-color: var(--next-border-color-light) !important;
		}
		.current-time{
			color: var(--next-color-white) !important;
		}
		.week-area{
			.week-cell{
				color: var(--next-color-white) !important;
			}
		}
		.view-controller .calendar-tab{
			border-color: var(--next-border-color-light) !important;
			background: transparent !important;
		}
		.calendar-controller .date-change{
			background: transparent !important;
			border-color: var(--next-border-color-light) !important;
			.btn{
				border-color: var(--next-border-color-light) !important;
				&:hover {
                    background: var(--el-color-primary-light-9) !important; 
                }
			}
		}
		.calendar-controller .date-change-container {
			.today-disabled{
				background: var(--next-color-disabled) !important;
			}
			.today{
				border-color: var(--next-border-color-light) !important;
			}
		}
		.date-picker .date-ipt{
			background: unset;
		}
		.calendar-page-options .page-right {
			&::before {
				background: linear-gradient(to right, var(--next-bg-main), var(--el-color-primary-light-9)) !important;
			}
		}
		.calendar-page-options .page-left{
			&::before{
				background: linear-gradient(to left, var(--next-bg-main), var(--el-color-primary-light-9)) !important;
			}
		}
	}
	.ssal-calendar-container{
		border-color: var(--next-border-color-light) !important;
		.week-area{
			box-shadow: 0 0 5px 0 rgb(255, 255, 255,  .06) !important;
			.week-cell{
				border-color: var(--next-border-color-light) !important;
			}
		}
		.month-view .month-date{
			border-color: var(--next-border-color-light) !important;
		}
		.month-view .day{
			color: var(--next-text-color-regular) !important;
		}
		.time-line .current{
			background: var(--next-bg-main) !important;
		}
		.month-event-cell{
			border-color: var(--next-border-color-light) !important;
			&:hover{
				background-color: var(--next-color-white) !important;
			}
		}
		.week-view .week-container .today {
			background: var(--el-fill-color-blank) !important;
		}
		.week-view .week-data{
			border-color: var(--next-border-color-light) !important;
		}
		.week-view .header-week{
			box-shadow: 0 0 10px 0 rgb(255, 255, 255, .06) !important;
			.week-cell{
				.date .day{
					color: var(--next-text-color-regular);
				}
				.week{
					color: var(--next-text-color-regular) !important;
				}
				&::after{
					border-color: var(--next-border-color-light) !important;
				}
			}
			.unable {
				.week,
				.date .day,
				.date .lunar{
					color: var(--next-color-seting) !important;
				}
			}
			.weekend-day {
				.week {
					color: #f56c6c !important;
				}
				.date {
					.day {
						color: #f56c6c;
					}
				}
			}
			.week-today {
				.week {
					color: var(--ss-color-primary) !important;
				}
				.date {
					.day {
						color: var(--ss-color-primary) !important;
					}
				}
			}
		}
		.header-time-zone{
			border-color: var(--next-border-color-light) !important;
		}
		&::after{
			border-color: var(--next-border-color-light) !important;
		}
		.time-cell .time{
			border-color: var(--next-border-color-light) !important;
			color: var(--next-text-color-regular) !important;
		}
		.time-cell:last-child .time{
			&::after{
				border-color: var(--next-border-color-light) !important;
			}
		}
		.time-cell .outTime{
			color: var(--next-color-seting) !important;
		}
		.time-placeholder{
			background: var(--el-fill-color-blank) !important;
		}
		.multiple-week{
			border-color: var(--next-border-color-light) !important;
			&::after{
				background: transparent !important;
			}
		}
		.multiple-week .multiple-week-box .multiple-cell{
			background: var(--el-fill-color-blank) !important;
		}
		.multiple-week .multiple-week-box .multiple-cell .multiple-container .title-header .center-title {
			color: var(--next-text-color-regular) !important;
		}
		.multiple-week .multiple-week-box .multiple-cell .multiple-container .title-header .title-date{
			color: var(--next-color-white);
		}
		.multiple-week .multiple-summary {
			&:hover{
				&::after{
					background: var(--el-fill-color-blank) !important;
				}
			}
		}
		.multiple-week .multiple-list .multiple-event-cell .multiple-event-data {
			color: var(--next-color-white);
		}
		.multiple-week .multiple-summary .no-black {
			&:hover{
				&::after {
					background: var(--el-fill-color-blank) !important;
				}
			}
		}
		.event-wrapper .event-cell{
			filter: invert(100%);
		}
		.event-model-container .more-content {
			background: var(--el-fill-color-blank) !important;
			border-color: var(--next-border-color-light);
			.more-title-options {
				background: var(--next-bg-main) !important;
				.more-time{
					color: var(--next-color-white);
				}
			}
			.more-evnet-list .more-event-item{
				filter: invert(1);
			}
		}
	}
	.organize-tree{
		background: var(--next-bg-main);
		.el-tree-node.is-current > .el-tree-node__content {
			color: var(--next-color-bar) !important;
		}
		.el-tree{
			background: transparent;
		}
	}
	.splitpanes.default-theme .splitpanes__splitter {
		background-color: var(--next-color-disabled) !important;
	}
	// 
	.default-theme.splitpanes--vertical>.splitpanes__splitter, .default-theme .splitpanes--vertical>.splitpanes__splitter {
		border-color: var(--next-border-color-light) !important;
	}
	.splitpanes.default-theme .splitpanes__splitter::before,
	.splitpanes.default-theme .splitpanes__splitter:after{
		background-color: var(--next-border-color-light) !important;
	}

	/** 聊天模块 **/
	.chat-model{
		.aside-box, 
		.el-main {
			background-color: var(--next-bg-main-color);
		}
		.menu-list{
			color: var(--el-text-color-primary);
			border-left-color: var(--next-bg-main-color);
			&.selectd{
				background-color: var(--el-fill-color-blank);
			}
			&:hover{
				border-left-color: var(--next-bg-main-color);
			}
		}
		.panel .header.border {
			border-color: var(--el-border-color-light);
			color: var(--el-text-color-primary);
		}
		.panel .panel-body .data-item .card .title .name{
			color: var(--el-text-color-primary);
		}
		.panel .panel-body .data-item{
			border-color: var(--el-border-color-light);
			&:hover {
				box-shadow: 0 0 8px 4px var(--next-color-disabled);
			}
			.apply-from {
				background: transparent;
			}
		}
		.ov-hidden{
			background: transparent;
		}
		#panel-header{
			border-color: var(--el-border-color-light);
		}
		.aside-box .subheader, 
		.aside-box .main .talk-item.active,
		.aside-box .main .talk-item:hover {
			background: var(--next-color-disabled);
		}
		#panel-header .left-module .nickname{
			color: var(--el-text-color-primary);
		}
		.el-footer{
			.el-main{
				background: var(--next-color-disabled);
			}
		}
		.editor-container{
			background: var(--next-color-disabled);
		}
		.editor-container .toolbar{
			border-color: var(--el-border-color-light);
		}
		.editor-container textarea{
			background: var(--next-color-disabled);
			color: var(--el-text-color-primary);
		}
		.tips-board{
			background: var(--next-color-disabled);
			color: var(--el-text-color-primary);
		}
		::-webkit-scrollbar-thumb {
			background: var(--next-border-columns);
		}
		::-webkit-scrollbar-track-piece{
			background-color: var(--next-bg-main) !important;
		}
		.aside-box .main .talk-item .card-box .title .card-name {
			color: var(--el-text-color-primary);
		}
		.panel-aside {
			border-color: var(--el-border-color-light);
		}
		.container .header {
			border-color: var(--el-border-color-light);
			color: var(--el-text-color-primary);
		}
		.container .list-item.flex,
		.container .list-item{
			color: var(--el-text-color-primary);
		}
		.member-box .row-items{
			&:hover{
				background: var(--next-color-disabled);
			}
		}
		.member-box {
			border-color: var(--el-border-color-light);
			.row-header{
				border-color: var(--el-border-color-light);
			}
		}
		.system-msg{
			background: var(--next-color-disabled);
		}
		.system-text-message .content{
			background: var(--next-color-disabled);
		}
		.lum-dialog-mask .lum-dialog-box .header,
		.lum-dialog-box .sub-header{
			border-color: var(--el-border-color-light);
			background: var(--next-bg-main);
			color: var(--el-text-color-primary);
		}
		.lum-dialog-box .sub-header i{
			color: var(--el-text-color-primary);
		}
		.lum-dialog-box .sub-header .search-box{
			background: var(--next-color-disabled);
			input{
				background: var(--next-color-disabled);
			}
		}
		.type-items{
			border-color: var(--el-border-color-light);
			color: var(--el-text-color-primary);
		}
		.message-group .right-box .msg-header{
			color: var(--el-text-color-regular);
		}
		.message-group .right-box .msg-header .name {
			color: var(--el-text-color-primary);
		}
		.message-group .other-message{
			color: var(--el-text-color-disabled);
		}
		.message-group .text-message.left{
			background: var(--next-color-disabled);
			color: var(--el-text-color-primary);
		}
		#panel-header .left-module .num{
			color: var(--el-text-color-primary);
		}
		.text-message.left{
			background: var(--next-color-disabled);
			color: var(--el-text-color-primary);
			.arrow{
				border-color:transparent var(--next-color-disabled) transparent transparent;
			}
		}
		.aside-box .main .main-menu .title{
			color: var(--el-text-color-primary);
		}
	}
}
